<template>
	<view>
		<Sheader :title="'用户管理'" :background="'#fff'" :color="'#203136'"/>
		<view class="content-view">
			<view class="user-top__view">
				<view class="user-top_btns">
					<view class="user-top-view">
						<u-image :src="user" class="user-img" mode="widthFix" @click="checkGotoPage('user')"></u-image>
						<text class="user-top-view__text">我是用户</text>
					</view>
					<view class="user-top-view">
						<u-image :src="viter" class="user-img" mode="widthFix" @click="checkGotoPage('viter')"></u-image>
						<text class="user-top-view__text">我是服务者</text>
					</view>
				</view>
			</view>
			<view class="user-info">
				<view class="user-info__box">
					会员须知：<br/><br/>
					
					1、本软件分《用户》和《服务者》两种人群注册；<br/>
					2、用户只是该软件访问者，用户注册后不能发布信息（仅可以发布司机招聘）；用户注册后免费使用该产品；服务者注册后可以发布上传三种不同的信息。<br/>
					3、服务者可以为用户提供上门服务。以技能型服务为主。服务者身份注册后，可以发布上门服务、房屋出租、车辆出租信息；服务者需要缴纳费用才能展示推广你的服务。 <br/>
					4、若你需要发布司机招聘信息，那么就需要以用户身份注册后才能添加司机招聘信息。<br/>
					5、以服务者身份注册的网友具有两种角色；既具有服务者身份，也具有用户的身份。 <br/>
					6、若你已经以用户身份注册，但你愿意给网友提供上门服务，或者你需要发布车辆出租或房屋出租信息，那么还可以再次以服务者的身份注册，开通服务者的账号。
				</view>
			</view>
			<view class="user-bottom">
				服务热线：18884307944
			</view>
		</view>
	</view>
</template>

<script>
	import Sheader from '@/components/Sheader/index.vue'
	import user from '@/static/check-user.png'
	import viter from '@/static/check-viter.png'
	export default {
		data() {
			return {
				user: user,
				viter: viter,
				type: null
			}
		},
		components: {
			Sheader
		},
		onLoad(e) {
			this.type = e.type
		},
		onUnload() {
		},
		methods: {
			checkGotoPage(typeStr) {
			  const pathStr = typeStr == 'user' ? 'userLogin' : 'viterLogin';
		    if (this.type == 1) {
				this.$utils.gotoPage(`../${pathStr}/login`)
			} else {
				this.$utils.gotoPage(`../${pathStr}/register`)
			}
		  }
		}
	}
</script>

<style>
	.content-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: #fff;
		padding-top: 90rpx;
		height: 100vh;
		overflow: auto;
	}
	.user-img {
		margin: auto;
		margin-bottom: 24rpx;
	}
	.user-top__view {
		background: #fff;
		text-align: center;
		padding-top: 36rpx;
		width: 100%;
	}
	.user-top__text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #FFFFFF;
		opacity: 1;
		margin-bottom: 16rpx;
	}
	.user-top_btns {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 36rpx;
		padding: 0 28rpx;
	}
	.user-top-view {
		width: 50%;
		height: 100%;
		position: relative;
	}
	.user-top-view__text {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%, 0);
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #303133;
		opacity: 1;
	}
	.user-btn {
		padding: 16rpx 72rpx;
		color: #fff;
		border-radius: 8rpx;
		border: 2rpx solid #fff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #FFFFFF;
		opacity: 1;
	}
	.user-top_login {
		margin-left: 20rpx;
		background-color: #fff;
		color: #2979FF;
	}
	.user-info {
		padding: 30rpx;
		background-color: #fff;
	}
	.user-info__box {
		padding: 24rpx 20rpx;
		border: 1px solid #C0C4CC;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #303133;
		opacity: 1;		
	}
	.user-bottom {
		padding: 18rpx;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 32rpx;
		color: #909399;
		opacity: 1;
		background: #F8F8F8;
		width: 100%;
	}
	/deep/ .uicon-phone-fill {
		color: #2979FF;
	}
	/deep/ .uicon-reload {
		color: #6FF40A;
	}
	/deep/ .uicon-trash-fill {
		color: #EBED8B;
	}
	/deep/ .uicon-info-circle-fill {
		color: #2979FF;
	}
</style>
